<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="js/jquery.min.js"></script>
</head>

<body>
    <!-- 这里将会显示被嵌入的HTML内容 -->
    <div class="filterbg7"></div>
    <div class="popup7">
        <a href="javascript:;" class="popupClose7"></a>
        <div style="width:100%;height: 40px;position: absolute;top: 20px; background-repeat: no-repeat;">
            <div style="text-align: center;">
                <div class="left_title1"
                    style="display: inline-block;position: absolute;text-align: center;margin-left:560px;margin-top: 15px;font-size: 22px;">
                    ESD系统
                </div>
                <img src="./bottom.png" alt="" style="display: inline-block;">
            </div>
        </div>
    </div>
</body>
<style>
    .filterbg7 {
        width: 100%;
        height: 100%;
        /* background: rgba(30,182,254,0.5); */
        position: absolute;
        top: 0;
        left: 0;
        z-index: 998;
        display: none;
    }

    .popup7 {
        width: 0;
        height: 0;
        background: #061f3e;
        position: absolute;
        top: 50%;
        left: 50%;
        z-index: 999;
        border-radius: 8px;
        display: none;
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        -o-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }

    .popup7 .popupClose7 {
        display: block;
        width: 44px;
        height: 44px;
        background: url(../s_ico3.png);
        background-size: 100 100%;
        position: absolute;
        top: -22px;
        right: -22px;
        display: none;
        transition: 0.3s;
    }

    .popup7 .popupClose7:hover {
        transform: rotate(180deg);
    }
</style>
<script>
    $(function () {
        $('.ESDSyetemClass').on('click', function () {
            $('.filterbg7').show();
            $('.popup7').show();
            $('.popup7').width('3px');
            $('.popup7').animate({ height: '56%' }, 400, function () {
                $('.popup7').animate({ width: '50%' }, 400);
            });
            setTimeout(summaryShow7, 800);
        });
        $('.popupClose7').on('click', function () {
            $('.popupClose7').css('display', 'none');


            $('.popup7').animate({ width: '3px' }, 400, function () {
                $('.popup7').animate({ height: 0 }, 400);
            });
            setTimeout(summaryHide7, 800);
        });
        function summaryShow7() {
            $('.popupClose7').css('display', 'block');

        };
        function summaryHide7() {
            $('.filterbg7').hide();
            $('.popup7').hide();
            $('.popup7').width(0);
        };
    })
</script>

</html>